<template>
    <div>
        <h1>1. 常见文本标签</h1>
        <hr>

        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        <p style="color: blueviolet;">段落，使用内联样式</p>
        <p>使用内部样式；文本格式化标签： <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s></p>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>

        <table border="1">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </table>

        <h1>2. html属性</h1>
        <hr>

        <a href="http://www.baidu.com">百度</a>
        <br>
        <a href="http://www.baidu.com" target="_blank">百度（新页面打开）</a>
        <br>
        <img src="../assets/img/qsmy-1.jpeg" alt="111" width="200">

        <h1>3. html区块</h1>
        <hr>

        <div>div 块级元素，无语义，布局</div>
        <div class="nav">
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
        </div>
        <span> span 行内，无语义，文本样式</span>

        <h1>4. html 表单</h1>
        <hr>

        <form action="#">  <!-- 表单提交到哪里 #不跳转 -->
            <label for="name">用户名：</label>
            <input id="name" type="text" placeholder="请输入用户名"> <br>
            <label for="pwd">密码：</label>
            <input id="pwd" type="password" placeholder="请输入密码"> <br>

            <label for="gender">性别：</label>
            <input type="radio" value="1" name="gender" checked>男
            <input type="radio" value="0" name="gender">女 <br>

            <label for="like">爱好：</label>
            <input type="checkbox" value="0" name="like">游戏
            <input type="checkbox" value="1" name="like">篮球
            <input type="checkbox" value="2" name="like">游泳 <br>

            <input type="submit" value="确定">
        </form>


        <h1>4. css 属性</h1>
        <hr>
        
    </div>
</template>

<style>

p {
    color: red;
}

</style>